/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

import AvatarCard from "@/components/AvatarCard";
import AvatarMobileCard from "@/components/AvatarCard/AvatarMobileCard";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import Conversation from "./Conversation";
import ToolBar from "./ToolBar";
import CameraArea from "./CameraArea";
import AudioController from "./AudioController";
import utils from "@/utils/utils";
import style from "./index.module.less";
import DoubaoAvatar from "@/assets/img/DoubaoAvatar.png";
import Audio from "./Audio";
import Hangup from "./Hangup";
function Room() {
  const room = useSelector((state: RootState) => state.room);

  const diyClassName = {
    opacity: room.caption ? 1 : 0
  };

  return (
    <div className={`${style.wrapper}`}>
      <Conversation className={style.conversation} style={diyClassName} />
      {
        !room.caption ?
        <div className="flex justify-center" style={{position: 'absolute',top: '0%',left: '50%',transform: 'translate(-50%, 0)'}}>
          <AvatarMobileCard avatar={DoubaoAvatar} className={style.avatar} />
        </div> : null
      }
      {/* {room.caption ? (
        <Conversation className={style.conversation} style={diyClassName} />
      ) : (
        <div className="flex justify-center">
          <AvatarMobileCard avatar={DoubaoAvatar} className={style.avatar} />
        </div>
      )} */}
      <div className="flex justify-between absolute bottom-28 w-screen left-0 px-8">
        <Audio />
        <AudioController className={style.controller} />
        <Hangup />
      </div>
    </div>
  );
}

export default Room;
